	@import '@/styles/mixin.scss';
	.loginPage{
		.error_msg{
			position: absolute;
			color: red;
			line-height: 1.25rem;
			font-size: 0.75rem;
			top: 3.25rem;
		}
		.topTitle{
			@include toptitle;
			.fr{
				font-size: 1rem;
			}
			.login-tips{
				margin-left: 0.93rem;
			}
		}
		.cont{
			padding: 0.62rem 0.93rem 0;
			.loginForm-ul{
				li{
					position: relative;
					border-bottom: 1px solid #dbdbdb;
					.formfile{
						i{
							float: left;
							margin: 0.62rem 0.62rem 0;
						}
					}
					input{
						float: left;
						width: 16.25rem;
						height: 2.75rem;
						line-height: 2.75rem;
						border: 0 none;
						font-size: 1rem;
					}
					.error_msg{
						line-height: 1.25rem;
						color: red;
					}
					.send-code{
						display: block;
						color: #2E9DE7;
						text-align: center;
					}
					.send-code.disabled{
						color: #A6A6A6;
						pointer-events: none
					}
				}
			}
			.xieyi{
				position: relative;
				margin-top: 1rem;
				font-size: 0.87rem;
				a{
					color: #36b9fd
				}
			}
		}
		.btn{
			margin: 2.5rem 0 0.75rem;
			text-align: center;
			a{
				display: inline-block;
				width: 20.31rem;
				height: 2.87rem;
				line-height: 2.87rem;
				background: #2a9efa;
				border-radius: 0.31rem;
				color: #fff;
				font-size: 1.12rem;
			}
		}
		.no-login-wrap{
			width: 20.31rem;
			margin: 0 auto 1.2rem;
			font-size: 0.87rem;
			a{
				color: #36b9fd
			}
		}
		.otherlogin{
			position: relative;
			height: 1.75rem;
			line-height: 1.75rem;
			margin-bottom: 0.25rem;
			text-align: center;
			font-size: 1rem;
			color: #666;
			span{
				position: absolute;
				left: 0;
				top: 0.87rem;
				width: 100%;
				height: 1px;
				overflow: hidden;
				background: #e8e0e0;
			}
			i{
				position: relative;
				display: inline-block;
				padding: 0 0.62rem;
				background-color: #fff;
				font-style: normal;
			}
		}
		.otherloginDiv{
			text-align: center;
			a{
				display: inline-block;
				margin: 0.31rem 0.62rem 0;
				width: 3.56rem;
				height: 3.56rem;
			}
		}
	}
	.no-live{position: absolute;width: 143px;padding-top: 118px;left: 50%;top: 50%;margin: -68px 0 0 -72px;color: #fff;text-align: center;}
	.video-box{position: relative;height: calc(100vw * 9 / 16);background-color: #24231D;}
	.layout_main{position:fixed;bottom: 0;left: 0;right: 0;background-color: #fff;}
	.player-icon{background: url(../views/family_hall/template1/images/video_action_play.png);width: 50px;height: 50px;background-size: 100% 100%;position: absolute;top: calc(50% - 25px);left: calc(50% - 25px);z-index: 9;}
	.login-page-wrap{
		input::-webkit-input-placeholder,
		textarea::-webkit-input-placeholder {
		  color: #999;
		}
		.login-body-wrap{
			position: relative;
			margin: 0.93rem;
			.login-page-item.border-1px{
				@include border-1px;
			}
			.login-page-item{
				.error-msg{
					position: absolute;
					top: 0;
					color: red;
					line-height: 1.25rem;
					font-size: 0.75rem;
				}
				margin-bottom: 0.75rem;
				.login-icon{
					float: left;
					margin: 0.75rem 0.87rem 0;
				}
				.icon-user{
					width: 1.37rem;
					height: 1.37rem;
					margin-left: 1rem;
					margin-right: 1rem;
					@include setFixedBackground('../assets/images/icon-user@2x.png');
				}
				.icon-password{
					width: 1.4rem;
					height: 1.4rem;
					@include setFixedBackground('../assets/images/icon-password@2x.png');
				}
				.icon-password-see,.icon-password-nosee{
					width: 1.43rem;
					height: 1.43rem;
					margin: 0.87rem 0 0 0;
				}
				.icon-password-see{
					@include setFixedBackground('../assets/images/icon-visibility@2x.png');
				}
				.icon-password-nosee{
					@include setFixedBackground('../assets/images/icon-visibility-off@2x.png');
				}
				.icon-phone{
					width: 1.4rem;
					height: 1.4rem;
					@include setFixedBackground('../assets/images/icon-phone@2x.png');
				}
				.icon-code{
					width: 1.4rem;
					height: 1.4rem;
					margin-top: 0.6rem;
					@include setFixedBackground('../assets/images/icon-captcha@2x.png');
				}
				.login-input{
					float: left;
					width: 16.25rem;
					height: 3rem;
					outline: 0 none;
					border: 0 none;
				}
				.get-code-span,.get-code-disabled{
					position: absolute;
					font-size: 1rem;
					color: #999999;
					padding: 0 0.87rem;
					line-height: 2.06rem;
					border-left: 1px solid #ddd;
					top: 50%;
					transform: translateY(-50%)
				}
				.get-code-disabled{
					border: 0 none;
					width: 5rem;
					border: 1px solid #979797;
					text-align: center;
					border-radius: 8px;
					color: #4360F0;
				}
				.agree-radio{
					transition:background-color .15s, border-color .15s;
				}
				.radio-label.checked,.agree-radio:checked + .radio-label{
					background-color:#4360F0;
					border-color: #4360F0;
				}
				.radio-label{
					display: inline-block;
					width: 0.87rem;
					height: 0.87rem;
					margin-right: 0.75rem;
					border: 1px solid #999;
					border-radius: 50%;
					background: url(../assets/images/icon-checkbox-gou.png) no-repeat center;
					background-size: contain;
				}
			}
			.login-a-wrap{
				font-size: 0.87rem;
				color: #4360F0 ;
			}
			.login-btn-wrap{
				.login-btn{
					margin: 2.5rem auto 7rem;
					width: 18.75rem;
					height: 3.12rem;
					line-height: 3.12rem;
					text-align: center;
					background-color: #4360F0;
					color: #fff;
					border-radius: 1.56rem;
				}
			}
			.third-part-login-wrap{
				position: relative;
				text-align: center;
				font-size: 0.87rem;
				color: #999;
				&::before,&::after{
					content: '';
					position: absolute;
					width: 108px;
					border-top:1px solid #ddd;
					top: 50%;
					transform: translateY(-50%)
				}
				&::before{
					left: 1rem;
				}
				&::after{
					right: 1rem;
				}
				.third-part-inner-wrap{
					position: absolute;
					left: 0;
					right: 0;
					top: 3.12rem;
					a{
						position: absolute;
						width: 3.12rem;
						height: 3.12rem;
					}
					.icon-qq{
						left: 6.25rem;
						@include setFixedBackground('../assets/images/icon-qq@2x.png');
					}
					.icon-weixin{
						@include setFixedBackground('../assets/images/icon-weixin@2x.png');
						right: 6.25rem;
					}
				}
			}
		}
	}
	.login-page-header-wrap{
		position: relative;
		box-shadow: 0 0px 6px rgba(0,0,0,.1);
		.login-jump{
			position: absolute;
			font-size: 1.12rem;
			right: 1.87rem;
			top: 50%;
			transform: translateY(-50%);
		}
		.icon-back{
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			left: 1.87rem;
			width: 1rem;
			height: 1.68rem;
			@include setFixedBackground('../assets/images/icon-back@2x.png');
		}
		.login-page-header{
			height: 2.75rem;
			line-height: 2.75rem;
			text-align: center;
			font-size: 18px;
			color: #232323;
			font-weight: 500;
			text-shadow: 0 0 .5px;
		}
	}
	.bind-phone-outer-wrap{
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 1000;
		background-color:white;
		overflow: hidden;
		transition: transform .15s;
        transform: translateX(100%);
	}
	.bind-phone-outer-wrap.active{
		transform: translateX(0%);
	}
/*解决移动端retina屏1px线变粗的方法*/
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
	.border-1px{
		&::before{
			transform: scaleY(0.5);
		}
	}
	.third-part-login-wrap{
		&::before,&::after{
			transform: translateY(-50%) scaleY(0.5) !important;
		}
	}
	.border-4-1px{
		&::before{
			width: 200%;
			height: 200%;
			transform:scale(0.5);
			transform-origin:0 0;
		}
	}
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
	.third-part-login-wrap{
		&::before,&::after{
			transform: translateY(-50%) scaleY(0.33) !important;
		}
	}
}